<script lang="ts" setup>
import { reactive, ref, onMounted, toRaw } from 'vue'
import type { ElTable } from 'element-plus'
import type { FormInstance, FormRules } from 'element-plus'
import { ElMessage } from 'element-plus'
import { Search, RefreshRight, MessageBox } from '@element-plus/icons-vue'
import { JobModel } from './class/JobModel'
import { getJobList,changesStatus } from '../../../http/index'
import addVue from './components/add.vue'
import Once from './components/once.vue'
const ruleFormRef = ref<FormInstance>()
const multipleTableRef = ref<InstanceType<typeof ElTable>>()
const form = reactive({
    jobId: "",
    beanName: "",
    methodName: "",
    methodParams: "",
    cronExpression: "",
    jobStatus: "",
    remark: "",
    createTime: "",
    updateTime: "",
    procName: "",
    sdbUrl: "",
    tdbUrl: "",
    beginTime: "",
    endTime: "",
    pkName: "",
    yydm: "",
    yymc: "",
})
const rules = reactive<FormRules>({
    name: [{ required: false, message: '请输入任务ID', trigger: 'blur' }]
})

//查询
const onSubmit = async (ruleFormRef: FormInstance | undefined) => {
    if (!ruleFormRef) return;
    await ruleFormRef.validate((valid, fields) => {
        if (valid) {
            LoadTableData()
        } else {
            console.log('error submit!', fields)
        }
    })
}
//重置
const resetForm = (ruleFormRef: FormInstance | undefined) => {
    if (!ruleFormRef) return
    ruleFormRef.resetFields()
    LoadTableData()
}
//详情
// const handleQuery = (index: number, row: PersonModel) => {
//     console.log(index, row)
//     queryDialog.value = true
// }
const addVisible = ref(false)
const onceVisible = ref(false)
const add = () => {
    console.log(info.value);
    info.value = null;
    addVisible.value = true;
}


const CloseAdd = () => {
    addVisible.value = false;
    onceVisible.value = false;
    info.value = undefined;
    LoadTableData();
}
const info = ref()
//编辑
const handleEdit = (index: number, row: JobModel) => {
    info.value = JSON.stringify(row)
    addVisible.value = true
}
const once = (index: number, row: JobModel) => {
    info.value = JSON.stringify(row)
    onceVisible.value = true
    console.log("单次执行");
    
}



//单个删除
const handleDelete = async (index: number, row: JobModel) => {
    // tableData.value = tableData.value?.filter(s => s.id != row.id)
    // const res = await delUsers(row.id) as any as boolean
    // if (res) {
    //     ElMessage({
    //         message: '删除成功！',
    //         type: 'success',
    //     })
    // }
}
//批量删除
const Del = async () => {
    // let arr: any[] = multipleTableRef.value?.getSelectionRows()
    // let ids: string = arr.map(item => { return "'" + item.id + "'" }).join(',')
    // const res = await batchDelUsers(ids) as any as boolean
    // if (res) {
    //     ElMessage({
    //         message: '删除成功！',
    //         type: 'success',
    //     })
    //     LoadTableData()
    // }
}
// const queryDialog = ref(false)
// const queryDialogClose = () => {
//     queryDialog.value = false;
// }
//表格
const tableData = ref<Array<JobModel>>()
onMounted(async () => {
    LoadTableData()
})
const LoadTableData = async (name: string = "") => {
    let parms:string; 
    if(form.jobId===""){
        parms="0"
    }else{
        parms=form.jobId
    }
    let res = await getJobList(parms) as any
    console.log(res.data);
    
    // form.Total = res.total

    // console.log(await getJobList(0) as any);
    // console.log(res);
    tableData.value = res.data as JobModel[]
    console.log(tableData)
}
//分页
const handleCurrentChange = (val: number) => {
    // form.pageIndex = val
    // LoadTableData()
}

//#region 启动任务
const startJob = async (row: JobModel)=>{
    console.log(row);
    let res = await changesStatus(row.jobId,"1")
    console.log(res);
    if(res.status){
        ElMessage({
                message: '任务('+row.remark+')启动成功！',
                type: 'success',
            })
        LoadTableData()
    }else{
        ElMessage({
            message:'任务('+row.remark+')启动失败！！！',
            type:'error'
        })
    }
    
}
//#endregion

//#region 停止任务
const stopJob = async (row: JobModel)=>{
    console.log(row);
    let res = await changesStatus(row.jobId,"0")
    console.log(res);
    if(res.status){
        ElMessage({
                message: '任务('+row.remark+')停止成功！',
                type: 'success',
            })
        LoadTableData()
    }else{
        ElMessage({
            message:'任务('+row.remark+')停止失败！！！',
            type:'error'
        })
    }
}
//#endregion
</script>
<template>
    <el-card class="box-card">
        <template #header>
            <div class="card-header">
                <el-form :inline="true" :model="form" class="demo-form-inline" :rules="rules" ref="ruleFormRef">
                    <el-form-item label="名称" prop="name">
                        <el-input style="width: 300px;" v-model="form.jobId" placeholder="目前仅支持任务ID查询，请输入任务ID" />
                    </el-form-item>
                    <el-form-item>

                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit(ruleFormRef)">
                            <el-icon>
                                <search />
                            </el-icon>查询
                        </el-button>
                        <el-button @click="resetForm(ruleFormRef)">
                            <el-icon>
                                <refresh-right />
                            </el-icon>重置
                        </el-button>
                    </el-form-item>
                </el-form>
                <p>
                    <el-button type="primary" @click="add">新增</el-button>
                    
                    <!-- <el-button type="danger" @click="Del">删除</el-button>
                    <el-button type="primary" @click="SetingRole">分配角色</el-button> -->
                </p>
            </div>
        </template>
        <el-table :data="tableData" style="width: 100%" ref="multipleTableRef">
            <el-table-column type="selection" width="55" />
            <el-table-column label="任务ID" width="70">
                <template #default="scope">
                    <div>{{ scope.row.jobId }}</div>
                </template>
            </el-table-column>
            <el-table-column label="接口类型">
                <template #default="scope">
                    <div>{{ scope.row.beanName }}</div>
                </template>
            </el-table-column>
            <el-table-column label="目标数据库类型">
                <template #default="scope">
                    <div>{{ scope.row.methodName }}</div>
                </template>
            </el-table-column>
            <el-table-column label="目标表名">
                <template #default="scope">
                    <div>{{ scope.row.methodParams }}</div>
                </template>
            </el-table-column>
            <el-table-column label="cron表达式">
                <template #default="scope">
                    <div>{{ scope.row.cronExpression }}</div>
                </template>
            </el-table-column>
            <el-table-column label="状态">
                <template #default="scope">
                    <div>{{ scope.row.jobStatus === 0 ? '未启动' : '已启动' }}</div>
                </template>
            </el-table-column>
            <el-table-column label="任务名称">
                <template #default="scope">
                    <div>{{ scope.row.remark }}</div>
                </template>
            </el-table-column>
            <el-table-column label="存储过程名称">
                <template #default="scope">
                    <div>{{ scope.row.procName }}</div>
                </template>
            </el-table-column>
            <el-table-column label="源数据库连接">
                <template #default="scope">
                    <div>{{ scope.row.sdbUrl }}</div>
                </template>
            </el-table-column>
            <el-table-column label="目标数据库连接">
                <template #default="scope">
                    <div>{{ scope.row.tdbUrl }}</div>
                </template>
            </el-table-column>
            <el-table-column label="开始时间">
                <template #default="scope">
                    <div>{{ scope.row.beginTime }}</div>
                </template>
            </el-table-column>
            <el-table-column label="结束时间">
                <template #default="scope">
                    <div>{{ scope.row.endTime }}</div>
                </template>
            </el-table-column>
            <el-table-column label="主键名称">
                <template #default="scope">
                    <div>{{ scope.row.pkName }}</div>
                </template>
            </el-table-column>
            <el-table-column label="医疗机构代码">
                <template #default="scope">
                    <div>{{ scope.row.yydm }}</div>
                </template>
            </el-table-column>
            <el-table-column label="医疗机构名称">
                <template #default="scope">
                    <div>{{ scope.row.yymc }}</div>
                </template>
            </el-table-column>
           
            <!-- <el-table-column label="创建时间" width="200">
                <template #default="scope">
                    <div>
                        <el-icon>
                            <timer />
                        </el-icon>
                        <span style="margin-left: 10px">{{ scope.row.createDate }}</span>
                    </div>
                </template>
            </el-table-column> -->
            <!-- <el-table-column label="用户类型" width="300">
                <template #default="scope">
                    <div>{{ scope.row.userType }}</div>
                </template>
            </el-table-column> -->
            <!-- <el-table-column label="角色" width="300">
                <template #default="scope">
                    <div>{{ scope.row.roleName }}</div>
                </template>
            </el-table-column>
            <el-table-column label="描述">
                <template #default="scope">
                    <div>{{ scope.row.description }}</div>
                </template>
            </el-table-column>
            <el-table-column label="是否启用">
                <template #default="scope">
                    <div>{{ scope.row.isEnable }}</div>
                </template>
            </el-table-column> -->
            <el-table-column label="操作" align="right" width="200">
                <template #default="scope">
                    <!-- <el-button size="small" type="success" @click="handleQuery(scope.$index, scope.row)">详情</el-button> -->
                    <el-button size="small" type="primary" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <!-- <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button> -->
                    <el-button size="small" type="success" v-if="scope.row.jobStatus===0" @click="startJob(scope.row)">启动</el-button>
                    <el-button size="small" type="danger" v-if="scope.row.jobStatus===1" @click="stopJob(scope.row)">停止</el-button>
                    <!-- <template v-if="scope.row.jobStatus===0"><el-button size="small" type="success" >启动</el-button></template>
                    <template v-if="scope.row.jobStatus===1"><el-button size="small" type="warning" >停止</el-button></template> -->
                    <el-button size="small" type="warning" @click="once(scope.$index, scope.row)">单次执行</el-button>
                    
                </template>
            </el-table-column>
        </el-table>
        <el-pagination background layout="prev, pager, next" :total="form.jobId"
            @current-change="handleCurrentChange" />
    </el-card>
    <addVue :addVisible="addVisible" :info="info" @CloseAdd="CloseAdd"></addVue>
    <Once :onceVisible="onceVisible" :info="info" @CloseAdd="CloseAdd"></Once>
</template>
<style lang="scss" scoped>
.el-pagination {
    margin-top: 50px;
}

.cell {
    text-align: center !important;
}

.queryTable {
    width: 500px;
    border-collapse: collapse;

    tr {
        height: 50px;

        td {
            padding: 10px;
        }

        .left {
            width: 30%;
            background-color: #F5F7FA;
        }

        .right {
            width: 80%;
        }
    }
}
</style>